<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/home">首页></router-link>
                        </li>
                        <li class="color666 f_left">在线报名</li>
                    </ul>
                </div>
                <div class="border_content text_center" v-if="stepIndex==0">
                    <img src="/static/img/title1.png" class="contTitleImg">
                    <h3 class="apply_title">建设类专业技术人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写您的报名信息</h4>
                    <el-form class="apply_form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="选择年度：">
                            <el-select v-model="form.repairStudyDate1" @change="changeYear">
                                <el-option v-for="(item,index) in repairStudys" :key="index" :label="item"
                                    :value="item">{{item}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.repairPeriod==0" label="选择专业：" class="choose_project">
                            <el-select v-model="form.typeName" placeholder="选择专业"
                                @change="typeChange($event,chooseTypes)">
                                <el-option v-for="item in chooseTypes" :key="item.typeCode" :label="item.typeName"
                                    :value="item.typeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.repairPeriod==1" label="选择专业：" class="choose_project">
                            <el-select v-model="form.typeName" placeholder="选择专业"
                                @change="typeChange($event,chooseTypesBu)">
                                <el-option v-for="item in chooseTypesBu" :key="item.typeCode" :label="item.typeName"
                                    :value="item.typeCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left faceEducation" label="选择类别：">
                            <el-checkbox-group v-model="checkedBox" @change="changeLei">
                                <div v-for="(item,index) in checkedLeis" :key="index">
                                    <el-checkbox style="margin-right: 20px;" :label="item">{{item.title}}</el-checkbox>
                                    <el-input-number v-model="item.period" :min="0" :max="item.typeCode=='zjtsjy'?60:20"
                                        label="描述文字" @change="changeNum(item)"></el-input-number>
                                    <span
                                        style="width: 45px;display: inline-block;font-size: 16px;text-align: center;color: #333333;">课时</span>
                                </div>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model="invoiceTitle" readonly @focus="ticketDialogs = true"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-form-item class="apply_btns">
                            <router-link class="apply_return" to="/cont_education/index">返回</router-link>
                            <a @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>
                    <!-- 选择发票 -->
                    <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
                </div>
                <div class="border_content text_center" v-if="stepIndex==1">
                    <img src="/static/img/title2.png" class="contTitleImg">
                    <h3 class="apply_title">建设类专业技术人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请确认您的报名信息</h4>
                    <el-form class="apply_form" ref="form" :rule="form" label-width="180px" style="width: 560px;">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{form.userName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{form.identity}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="选择年度：">
                            <el-select v-model="form.repairStudyDate1" disabled>
                                <el-option v-for="(item,index) in repairStudys" :key="index" :label="item"
                                    :value="item">{{item}}</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item class="text_left" label="报考专业：">
                            <p class="apply_p">{{form.typeName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left faceEducation" label="选择类别：">
                            <el-checkbox-group v-model="checkedBox">
                                <div v-for="(item,index) in checkedLeis" :key="index">
                                    <el-checkbox style="margin-right: 20px;" :label="item" disabled>{{item.title}}
                                    </el-checkbox>
                                    <el-input-number v-model="item.period" label="描述文字" disabled></el-input-number>
                                    <span
                                        style="width: 45px;display: inline-block;font-size: 16px;text-align: center;color: #333333;">课时</span>
                                </div>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{form.productPrice}}元</p>
                        </el-form-item>
                        <el-form-item label="发票抬头：" class="choose_project">
                            <p class="apply_p">{{invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="choose_project">
                            <p v-if="form.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="form.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns confirm_btns">
                            <p
                                style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">
                                提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="prevStep">上一步</a>
                            <a @click="confirmPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
        <el-dialog :visible.sync="showTips" title="重要通知" center :close-on-click-modal="false" style="">
            <div style="font-size: 17px;line-height: 30px;">
                <p>各注册企业、个人：</p>
                <p style="padding-left: 30px;">
                    请各学员报名前，务必先熟悉职称评审通知、继续教育培训学时认定细则等文件要求。在线学习结束或继续教育证明一经生成，我单位概不接受退费申请及其他信息修改诉求，望理解！</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showTips = false">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    var _this;
    import headerFooter from '../../../components/cont_education/header_and_footer.vue'
    import ticketDialog from '../../../components/invoice_lists.vue'
    export default {
        name: "y_zyjsry_apply",
        data: function() {
            return {
                showTips:true,
                repairStudys: ["2020", "2021"],
                checkedLeis: [{
                    title: "专业课",
                    period: 0, //60
                    typeCode: "zjtsjy"
                }, {
                    title: "行业公需课",
                    period: 0, //20
                    typeCode: "hzgx"
                }],
                checkedBox: [],
                stepIndex: 0, //是否显示选择专业弹框
                chooseTypes: [{
                        "typeName": "房建专业",
                        "typeCode": "_fjzy"
                    },
                    {
                        "typeName": "市政专业",
                        "typeCode": "_szzy"
                    },
                    {
                        "typeName": "安装专业",
                        "typeCode": "_azzy"
                    }
                ],
                chooseTypesBu: [{
                        "typeName": "房建专业",
                        "typeCode": "_fjzy_bks"
                    },
                    {
                        "typeName": "市政专业",
                        "typeCode": "_szzy_bks"
                    },
                    {
                        "typeName": "安装专业",
                        "typeCode": "_azzy_bks"
                    }
                ],
                form: {
                    identity: "",
                    userName: "",
                    typeName: "",
                    typeCode: "",
                    productPrice: 0,
                    invoiceTempId: "",
                    invoiceType: 0,
                    majorProductCode: "",
                    publicProductCode: "",
                    publicMultiple: 0,
                    majorMultiple: 0,
                    repairPeriod: 0,
                    repairStudyDate: "",
                    repairStudyDate1:""
                },
                ticketDialogs: false, //选择发票
                invoiceTitle: "",
                products: []
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted: function() {
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                _this.form.userName = info.realName;
                _this.form.identity = info.identityCode;
            });
            this.common.post(this.api.getProducts, {}, function(res) {
                _this.products = res.resultMap;
            });
        },
        methods: {
            invoiceBtn: function(data) {
                this.invoiceTitle = data.invoiceTitle;
                this.form.invoiceType = data.invoiceType;
                this.form.invoiceTempId = data.invoiceTempId;
            },
            invoiceFunc: function() {
                this.$refs.invoiceChild.getInvoiceTemp();
            },
            changeYear: function(year) {
                var myDate = new Date();
                var month = myDate.getMonth() + 1;
                var day = myDate.getDate();
                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                var nowYear = myDate.getFullYear();
                if (year != nowYear) {
                    this.form.repairPeriod = 1;
                } else {
                    this.form.repairPeriod = 0;
                }
                this.form.repairStudyDate1 = year;
                this.form.repairStudyDate = year + "-"+month+'-'+day;
                this.form.typeCode = "";
                this.form.typeName = "";
                this.checkedLeis.forEach(function(item) {
                    item.period = 0;
                });
                this.checkedBox = [];
            },
            typeChange: function(val, data) {
                _this.form.majorProductCode = "";
                _this.form.publicProductCode = "";
                this.checkedLeis.forEach(function(item) {
                    item.period = 0;
                });
                this.checkedBox = [];
                data.forEach(function(v) {
                    if (v.typeCode == val) {
                        _this.form.typeName = v.typeName;
                        _this.typeName = v.typeName;
                        _this.form.typeCode = v.typeCode;
                    }
                });
            },
            changeLei: function(arr) {
                _this.form.productPrice = 0;
                _this.form.majorProductCode = "";
                _this.form.publicProductCode = "";
                if (arr.length <= 0) return;
                arr.forEach(function(v, i) {
                    if (v.title == "专业课") {
                        _this.form.majorProductCode = v.typeCode + _this.form.typeCode;
                        _this.form.majorMultiple = v.period;
                    } else if (v.title == "行业公需课" && _this.form.repairPeriod == 0) {
                        _this.form.publicProductCode = "zjtsjy_hzgx";
                        _this.form.publicMultiple = v.period;
                    } else if (v.title == "行业公需课" && _this.form.repairPeriod == 1) {
                        _this.form.publicProductCode = "zjtsjy_hzgx_bks";
                        _this.form.publicMultiple = v.period;
                    }
                });

                this.countPrice();
            },
            changeNum: function(item) {
                if (item.typeCode == "zjtsjy") {
                    this.form.majorMultiple = item.period;
                } else {
                    this.form.publicMultiple = item.period;
                }
                this.countPrice();
            },
            // 报名确认
            countPrice: function() {
                var _this = this;
                var majorPrice = 0,
                    publicPrice = 0;
                this.products.forEach(function(v, i) {
                    if (!String.isEmptyOrNUll(_this.form.majorProductCode)) {
                        if (_this.form.majorProductCode == v.productCode) {
                            majorPrice = parseInt(v.productPrice) * _this.form.majorMultiple;
                        }
                    }
                    if (!String.isEmptyOrNUll(_this.form.publicProductCode)) {
                        if (_this.form.publicProductCode == v.productCode) {
                            publicPrice = parseInt(v.productPrice) * _this.form.publicMultiple;
                        }
                    }
                });
                _this.form.productPrice = majorPrice + publicPrice;
            },
            onSubmit: function() {
                console.log(this.form)
                if (this.form.repairStudyDate == "") {
                    this.$message.error('请选择年度！');
                    return;
                }
                if (this.form.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }
                if (String.isEmptyOrNUll(this.form.majorProductCode) && String.isEmptyOrNUll(this.form
                        .publicProductCode)) {
                    this.$message.error('请选择专业课或行业公需课！');
                    return;
                }
                if (!String.isEmptyOrNUll(this.form.majorProductCode) && parseInt(this.form.majorMultiple) == 0) {
                    this.$message.error('请选择要学习的课时！');
                    return;
                }
                if (!String.isEmptyOrNUll(this.form.publicProductCode) && parseInt(this.form.publicMultiple) == 0) {
                    this.$message.error('请选择要学习的课时！');
                    return;
                }
                if (String.isEmptyOrNUll(this.form.majorProductCode)) {
                    this.form.majorMultiple = 0;
                    this.checkedLeis[0].period = 0;
                }
                if (String.isEmptyOrNUll(this.form.publicProductCode)) {
                    this.form.publicMultiple = 0;
                    this.checkedLeis[1].period = 0;
                }
                if (this.form.invoiceTempId == "") {
                    this.$message.error('请选择发票！');
                    return;
                }
                this.stepIndex = 1;
            },
            //上一步
            prevStep: function() {
                this.stepIndex = 0;
            },
            //去付款
            confirmPay: function() {
                if (this.form.typeName == "") {
                    this.$message.error('请选择专业！');
                    return;
                }

                this.common.post(this.api.launchZjApplyTrade, this.form, function(data) {
                    _this.common.toPage("/home/apply/zhifubaopre/" + data.resultMap);
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });
            }
        },
        components: {
            headerFooter,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
        margin: 0 auto;
    }

    .el-checkbox {
        margin-right: 0;
    }

    .online_apply form.el-form.apply_form input.el-input__inner {
        line-height: 36px;
        height: 40px;
    }

    .online_apply form.el-form.apply_form input.el-input__inner,
    .online_apply form.el-form.special_apply_form.specialConfirm input.el-input__inner {
        margin-top: 0;
    }
</style>
